<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <%@include file="WEB-INF/jspf/HeadDocument.jspf" %>        
        <%@include file="WEB-INF/jspf/HeadJWizard.jspf" %>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false&region=US"></script>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>        
        <script type="text/javascript" src="${pageContext.request.contextPath}/content/knockout.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/content/scriptSolicitar.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/content/jquery-ui-timepicker.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/content/jquery.dateFormat-1.0.js"></script>
        <title>JSP Page</title>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#opt_soli').addClass("current_page_item");
            });
        </script>
    </head>
    <body>
        <div id="wrapper">
            <%@include file="WEB-INF/jspf/header.jspf" %>
            <%@include file="WEB-INF/jspf/menu.jspf" %>
            <section id="contenido">    
                <div id="jWizard">
                    <div title="Bienvenido">
                        <h3>Bienvenido</h3>
                        <p>Bienvenido al proceso de solicitud de taxi</p>
                    </div>
                    <div title="Paso 1" id="paso1">
                        <h3>Paso 1 - Seleccionar origen</h3>
                        <br/>
                        <section id="map_canvas_A" class="map_canvas"/>                        
                    </div>
                    <div title="Paso 2" id="paso2">
                        <h3>Paso 2 - Seleccionar destino</h3>
                        <br/>
                        <section id="map_canvas_B" class="map_canvas"/>                        
                    </div>
                    <div title="Paso 3" id="paso3">
                        <h3>Paso 3 - Seleccionar Empresa y Fecha del viaje</h3>                        
                        <section>
                            <span>Fecha del viaje</span>
                            <br/>
                            <input type="text" name="fecha" id="fechaSolicitud" value="" placeholder="Fecha y hora"/>
                            <br/>
                            <br/>
                            <span>Empresa proveedora del servicio</span>
                            <br/>
                            <select id="cmbEmpresasSolicita" required="required" size="5" data-bind="foreach: empresas">
                                <option data-bind="text: $data.nombre, attr: {value: $data.id}" />
                            </select>
                        </section>
                    </div>
                    <div title="Terminar" id="terminar">
                        <h3>Terminar</h3>
                        <section id="summary">
                            <span class="name">Origen:</span><span id="txtOrigen" class="value"></span>
                            <br/>
                            <span class="name">Destino:</span><span id="txtDestino" class="value"></span>
                            <br/>
                            <span class="name">Empresa:</span><span id="txtEmpresa" class="value"></span>
                            <br/>
                            <span class="name">Precio:</span><span id="txtPrecio" class="value"></span>
                            <br/>
                            <span class="name">Fecha:</span><span id="txtFecha" class="value"></span>
                        </section>
                        <em>Presiona Terminar para confirmar la informaci&oacute;n</em>
                    </div>
                </div>
            </section>
            <%@include file="WEB-INF/jspf/footer.jspf" %>
        </div>
    </body>
</html>
